import React, {Component} from 'react'
import PopoverWrapper from './PopoverWrapper'
import * as PopperJS from '@popperjs/core'

interface PopoverProps {
  children?: any
  target: string
  placement: PopperJS.Placement
  trigger: 'click' | 'hover' | 'focus' | 'keydown' | 'legacy'
  disabled?: boolean
  autoHide?: boolean
  size?: 'sm' | 'xl'
  className?: string
}

interface PopoverState {
  isOpen: boolean
}

class PopoverUncontrolled extends Component<PopoverProps, PopoverState> {
  constructor(props: any) {
    super(props)
    this.state = {
      isOpen: false,
    }
  }

  togglePopover = () => {
    const {isOpen} = this.state
    this.setState({isOpen: !isOpen})
  }

  render() {
    const {size, className, disabled, trigger, target, placement, autoHide, children} = this.props
    const {isOpen} = this.state
    let resultClassName =
      'uncon-popover ' + (size ? size : 'xl') + ' ' + (className ? className : '')
    return (
      <PopoverWrapper
        target={target}
        placement={placement}
        trigger={trigger || 'legacy'}
        isOpen={isOpen}
        role={'popover'}
        toggle={this.togglePopover}
        disabled={disabled}
        className={resultClassName}
        autoHide={autoHide || true}
        children={children}
      />
    )
  }
}

export default PopoverUncontrolled
